<!-- components/reconciliation/DifferenceAnalysisCell.vue -->
<template>
  <div class="difference-analysis-cell" v-if="differenceInfo && differenceInfo.hasDifferences">
    <div class="difference-item" v-if="differenceInfo.amountDiff">
      <el-tag type="danger" size="small">金额差</el-tag>
      <span class="difference-value">¥{{ differenceInfo.amountDiff.toFixed(2) }}</span>
    </div>
    <div class="difference-item" v-if="differenceInfo.dateDiff">
      <el-tag type="warning" size="small">时间差</el-tag>
      <span class="difference-value">{{ differenceInfo.dateDiff }}天</span>
    </div>
    <div class="difference-item" v-if="differenceInfo.nameSimilarity < 100">
      <el-tag type="info" size="small">名称</el-tag>
      <span class="difference-value">{{ differenceInfo.nameSimilarity }}%</span>
    </div>
  </div>
  <div v-else class="no-differences">
    <el-tag type="success" size="small">无差异</el-tag>
  </div>
</template>

<script setup lang="ts">
import type { ReconciliationResult } from '@/types/reconciliation'

const props = defineProps<{
  differenceInfo?: ReconciliationResult['differenceInfo']
  reasoning?: ReconciliationResult['reasoning']
}>()
</script>

<style scoped>
.difference-analysis-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.difference-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.difference-value {
  font-weight: 500;
  margin-left: 4px;
}

.no-differences {
  display: flex;
  justify-content: center;
}
</style>